<template>
  <div>
    <header-area @search="search" />
    <div class="container">
      <el-carousel class="carousel">
        <el-carousel-item class="carousel" v-for="item in imgList" :key="item">
          <el-image class="carousel-img" :src="item" fit="cover"></el-image>
        </el-carousel-item>
      </el-carousel>
      <div class="select">
        <el-select
          @change="fetchData"
          v-model="platform"
          clearable
          placeholder="请选择平台"
        >
          <el-option
            v-for="item in platformList"
            :key="item.platform"
            :label="item.platform"
            :value="item.platform"
          >
          </el-option>
        </el-select>
        <el-select
          @change="fetchData"
          clearable
          style="margin-left: 30px"
          v-model="type"
          placeholder="请选择种类"
        >
          <el-option
            v-for="item in typeList"
            :key="item.type"
            :label="item.type"
            :value="item.type"
          >
          </el-option>
        </el-select>
        <el-select
          @change="fetchData"
          clearable
          style="margin-left: 30px"
          v-model="isRisk"
          placeholder="请选择风险标注情况"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="nft">
        <el-card
          v-for="(item, index) in nftList"
          :key="item.id"
          @click.native="goToDetail(item.id)"
          :body-style="{ padding: '0px', cursor: 'pointer' }"
          class="card"
        >
          <video-player
            v-if="item.type == 'video'"
            :playsinline="true"
            :options="getPlayerOptions(index)"
          >
          </video-player>
          <img v-else-if="item.type == 'audio'" src="../assets/audio_poster.png" class="image" />
          <img v-else :src="item.content_url" class="image" />
          <div style="padding: 14px">
            <span style="font-size: 18px">{{ item.name }}</span>
            <div class="author">@{{ item.author }}</div>
            <div class="bottom clearfix">
              <span class="price-text">价格</span>
              <span :class="'price ' + (item.price > 0 ? '' : 'nonsale')">{{
                item.price > 0 ? item.price : "非卖品"
              }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <pagination
      v-show="nftList.length > 0"
      :total="total"
      :page.sync="page"
      :limit.sync="params.limit"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import HeaderArea from "@/components/HeaderArea.vue";
import Pagination from "@/components/Pagination";

export default {
  components: { HeaderArea, Pagination },

  data() {
    return {
      imgList: [
        "https://openseauserdata.com/files/99a4f20e30ce2cfe20376ee180547a0f.jpg",
        "https://lh3.googleusercontent.com/MXVoxTsBSmVDInaU2Ko-vIgq8a-vx74bdwfrYxvKCWq26IKoSg4o8Q0x2CDGQIrUNMt6SzrAbC53zSbm_i2sXH0E=w418",
      ],
      nftList: [],
      platformList: [],
      platform: "",
      typeList: [],
      type: "",
      isRisk: "",
      params: {
        limit: 8,
        offset: 0,
      },
      total: 0,
      page: 1,
      options: [
        {
          value: 0,
          label: "无风险",
        },
        {
          value: 1,
          label: "有风险",
        },
      ],
    };
  },

  computed: {},

  methods: {
    getContentUrl(item){
      if(item.type=='audio'){
        console.log("audio pic")
        let url= "/assets/audio_poster.png"
        return url
      }else{
        return item.content_url
      }
    },

    getPlayerOptions(index) {
      const playerOptions = {
        fluid: true, //自调整比例适应容器
        autoplay: true, // 如果为true,浏览器准备好时开始回放。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        loop: true,
        language: "zh-CN",
        muted: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        notSupportedMessage: "此视频暂无法播放",
        sources: [
          {
            type: "video/mp4",
            src: "",
          },
        ],
        controls: false,
        poster: "/assets/img/1.png",
      };
      const videoUrl = this.nftList[index].content_url;
      if (videoUrl) {
        playerOptions.sources[0].src = videoUrl;
      } else {
        this.nftList[index].content_url =
          "https://gw.alicdn.com/imgextra/i3/O1CN01DKaORe1dcIHH0eMRx_!!6000000003756-55-tps-164-142.svg";
        this.nftList[index].type = "image";
      }
      return playerOptions;
    },

    goToDetail(id) {
      this.$router.push({ path: "detail", query: { id: id } });
    },

    fetchData() {
      if (this.platform) {
        this.params["platform"] = this.platform;
      } else {
        delete this.params["platform"];
      }
      if (this.type) {
        this.params["type"] = this.type;
      } else {
        delete this.params["type"];
      }
      if (this.isRisk == 1 || this.isRisk == 0) {
        this.params["isRisk"] = this.isRisk;
      } else {
        delete this.params["isRisk"];
      }
      this.params["offset"] = (this.page - 1) * this.params.limit;
      console.log("params", this.params);
      this.$api.nft.getNftList(this.params).then((res) => {
        this.nftList = res.results;
        this.total = res.sum;
      });
    },

    search(params) {
      this.params[params.select] = params.keyword;
      this.fetchData();
    },
  },

  mounted() {
    this.fetchData();
    this.$api.nft.getPlatform().then((res) => {
      this.platformList = res.result;
    });
    this.$api.nft.getType().then((res) => {
      this.typeList = res.result;
    });
  },
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  padding: 16px;
  background-color: rgb(246, 253, 255);

  .carousel {
    height: 230px;
    border-radius: 10px;

    /deep/ .el-carousel__container {
      height: 230px;
    }

    .carousel-img {
      width: 100%;
    }
  }

  .select {
    margin-top: 24px;

    /deep/ .el-input__inner {
      border: 1.5px solid #939494;
    }
  }

  .nft {
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .card {
      flex: 0 0 23%;
      margin-bottom: 20px;
      margin-right: calc(7vw / 3);
      &:nth-child(4n) {
        margin-right: 0;
      }
    }

    .price-text {
      font-size: 13px;
      color: #fff;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
      margin-bottom: 8px;
    }

    .price {
      padding: 0;
      float: right;
      font-size: 28px;
      margin-top: 4px;
    }

    .nonsale {
      font-size: 24px;
      color: rgb(173, 173, 7);
    }

    .image {
      width: 100%;
      height: 200px;
      display: block;
    }

    /deep/ .video-player {
      width: 100%;
      height: 200px;
      overflow: hidden;

      .vjs-big-play-button {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      /* .video-js {
        height: 200px !important;

        .vjs-tech {
          height: 200px !important;
        }
      } */
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }

    .author {
      margin-top: 10px;
      color: rgb(102, 101, 101);
    }
  }
}
</style>
